<template>
    <div>
        <navigationBar :backType="2" navigationTitle="选择技师" />

        <view class="wrap-head" :style="'top:' + navigationHeight + 'px'">
            <view class="head-address flex align-center just-between">
                <view class="left-address flex align-center">
                    <image
                        :src="getImageURL('technician/choose/location.png')"
                    />
                    <view class="f-28">
                        当前定位:
                        {{
                            locationStatus === "loading"
                                ? "正在定位..."
                                : locationStatus === "success"
                                ? locationInfo.city
                                : "定位失败"
                        }}
                    </view>
                </view>

                <view
                    class="right-again flex align-center"
                    @click="onReLocation"
                >
                    <image :src="getImageURL('technician/choose/reget.png')" />
                    <view class="f-24">重新获取</view>
                </view>
            </view>

            <view class="head-search flex align-center just-between">
                <picker
                    mode="selector"
                    :range="screenCityList"
                    range-key="name"
                    :value="screenCity"
                    @change="onScreenCityChange"
                >
                    <view class="city-bg flex align-center">
                        <view class="f-28 limit-num-line">
                            {{ screenCity }}
                        </view>
                        <image
                            :src="
                                getImageURL(
                                    'technician/choose/city_arrow_down.png'
                                )
                            "
                        />
                    </view>
                </picker>

                <view class="search-bg flex align-center">
                    <image :src="getImageURL('technician/choose/search.png')" />

                    <input 
                        class="f-26 flex align-center"
                        type="text"
                        placeholder="请输入服务人名称"
                        placeholder-class="place"
                        v-model="keywords"
                        @blur="onRefresh"
                    />
                </view>

                <picker
                    mode="selector"
                    :range="screenGenderList"
                    range-key="name"
                    :value="screenGender"
                    @change="onScreenGenderChange"
                >
                    <view class="city-bg flex align-center">
                        <view class="f-28 limit-num-line">
                            {{ screenGender }}
                        </view>
                        <image
                            :src="
                                getImageURL(
                                    'technician/choose/city_arrow_down.png'
                                )
                            "
                        />
                    </view>
                </picker>
            </view>

            <view class="search">
                <view class="card flex align-center just-around f-28">
                    <view
                        class="item flex align-center just-center"
                        v-for="(item, index) in searchList"
                        :key="index"
                        :class="active == item.id ? 'active' : ''"
                        @click="onChoose(item)"
                    >
                        <view class="name">{{ item.name }}</view>
                        <view
                            class="icons flex column just-center"
                            v-if="item.id != 0"
                        >
                            <image
                                class="icon"
                                v-if="item.up"
                                src="/static/static/technician/joinUs/active.png"
                                mode="scaleToFill"
                            />
                            <image
                                class="icon"
                                v-else
                                src="/static/static/technician/joinUs/upup.png"
                                mode="scaleToFill"
                            />

                            <image
                                class="icon downActive"
                                v-if="item.down"
                                src="/static/static/technician/joinUs/active.png"
                                mode="scaleToFill"
                            />
                            <image
                                class="icon"
                                v-else
                                src="/static/static/technician/joinUs/downdown.png"
                                mode="scaleToFill"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="wrap paddingBottom">
            <!--  -->

            <!--  -->
            <view class="wrap-list">
                <block v-for="(item, index) in list" :key="index">
                    <view class="item flex align-center just-between">
                        <view class="left flex column align-center just-center">
                            <view class="imagess">
                                <image
                                    v-if="item.level == 3"
                                    class="border"
                                    src="/static/static/technician/joinUs/icons1.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    v-if="item.level == 2"
                                    class="border"
                                    src="/static/static/technician/joinUs/icons2.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    v-if="item.level == 1"
                                    class="border"
                                    src="/static/static/technician/joinUs/icons3.png"
                                    mode="scaleToFill"
                                />
                                <image
                                    :class="
                                        item.level !== 0 ? 'avatarI' : 'avatar'
                                    "
                                    :src="item.work_image"
                                />
                            </view>

                            <view class="service-status f-24">
                                {{
                                    item.is_service === 1 ? "可接单" : "已休息"
                                }}
                            </view>
                        </view>

                        <view class="center">
                            <view class="c-a flex align-center">
                                <view class="nickname fb-32 limit-num-line">
                                    {{ item.name }}
                                </view>
                            </view>

                            <view class="c-a flex align-center mt-20">
                                <view class="tags" v-if="item.level">
                                    <image
                                        :src="
                                            '/static/static/technician/joinUs/tags' +
                                            item.level +
                                            '.png'
                                        "
                                        mode="scaleToFill"
                                    />
                                </view>

                                <view
                                    class="life f-20"
                                    v-if="item.images.length > 0"
                                    @click.stop="onPreviewImage(item.images)"
                                >
                                    生活照
                                </view>
                            </view>

                            <view class="c-b flex align-center">
                                <image
                                    class="star"
                                    :src="
                                        getImageURL(
                                            'technician/choose/star.png'
                                        )
                                    "
                                />

                                <view class="score f-20">
                                    {{ item.star }}
                                </view>

                                <view class="num f-20">
                                    已服务{{ item.total_sales }}单
                                </view>
                            </view>

                            <view class="c-c flex align-center">
                                <image
                                    :src="
                                        getImageURL(
                                            'technician/choose/location.png'
                                        )
                                    "
                                />
                                <view class="f-24">{{ item.distance }}</view>
                            </view>

                            <view class="c-d flex align-center">
                                <view
                                    class="flex align-center f-26"
                                    @click="onShowDetails(item)"
                                >
                                    <image
                                        class="details-img"
                                        :src="
                                            getImageURL(
                                                'technician/choose/details.png'
                                            )
                                        "
                                    />
                                    <view class="details-text">详情</view>
                                </view>

                                <view
                                    class="evaluate-bg flex align-center f-26"
                                    @click.stop="onShowEvaluate(item)"
                                >
                                    <image
                                        class="evaluate-img"
                                        :src="
                                            getImageURL(
                                                'technician/choose/eveluate.png'
                                            )
                                        "
                                    />
                                    <view class="evaluate-text">
                                        {{ item.coumment }}
                                    </view>
                                </view>

                                <view
                                    class="like-bg flex align-center f-26"
                                    @click="onLike(item)"
                                >
                                    <image
                                        class="like-img"
                                        v-if="item.is_like == 1"
                                        :src="
                                            getImageURL(
                                                'technician/choose/like_select.png'
                                            )
                                        "
                                    />

                                    <image
                                        class="like-img"
                                        v-else
                                        :src="
                                            getImageURL(
                                                'technician/choose/like_normal.png'
                                            )
                                        "
                                    />
                                    <view class="like-text">
                                        {{ item.like_num }}
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view
                            class="right flex column align-center just-center"
                        >
                            <view class="time-bg">
                                <view class="aa f-24">最早可约</view>
                                <view class="bb f-24">
                                    时间{{ item.subscribe }}
                                </view>
                            </view>

                            <view
                                class="yy-btn f-20"
                                :style="
                                    item.is_service === 0
                                        ? 'background: #999'
                                        : ''
                                "
                                @click.stop="onAppointment(item)"
                            >
                                预约TA
                            </view>
                        </view>
                    </view>
                </block>
            </view>

            <uEmpty v-if="list.length === 0" />
        </view>

        <evaluatePop
            :isShow.sync="isShowEvaluate"
            :technicianID="evaluateTechnicianID"
        />

        <wrapFooter :btnTitle="'返回上页'" @onClick="onBack"></wrapFooter>
    </div>
</template>

<script>
import evaluatePop from "@/subPages/components/evaluate/evaluate.vue";
import { technicianList } from "@/API/API/technician.js";
import { getCity } from "@/API/API/common.js";
import location from "@/utils/utils/location.js";
import { likeTechnician } from "@/API/API/recruit.js";

export default {
    components: {
        evaluatePop,
    },
    data() {
        return {
            serviceID: "", //服务ID
            navigationHeight: this.$navigationHeight,
            keywords: "",
            locationStatus: "loading",
            locationInfo: null,

            screenCity: "", //筛选的城市
            screenCityID: "", //筛选的城市ID
            screenCityList: [], //筛选的城市列表
            screenGenderID: 0, //筛选的性别
            isShowEvaluate: false, //是否显示评价弹窗
            evaluateTechnicianID: 0, //评价的技师ID
            page: 1,
            total: 0,
            list: [],
            screenGender: "全部",
            screenGenderList: [
                {
                    id: 0,
                    name: "全部",
                },
                {
                    id: 1,
                    name: "男",
                },
                {
                    id: 2,
                    name: "女",
                },
            ],
            upActive: true,
            downActive: false,
            active: 0,
            searchList: [
                { name: "全部", id: 0 },
                { name: "销量", value: "sales", up: false, down: false, id: 1 },
                {
                    name: "好评度",
                    value: "popularity",
                    up: false,
                    down: false,
                    id: 2,
                },
            ],
            order: 0,
        };
    },
    onLoad(options) {
        if (options.id) {
            this.serviceID = options.id;
        }
        this.$nextTick(() => {
            this.getCityData();
            this.getLocation();
        });
    },
    onPullDownRefresh() {
        this.onRefresh();
    },
    onReachBottom() {
        if (this.list.length < this.total) {
            this.page++;
            this.getData();
        }
    },
    methods: {
        onLike(item) {
            item.is_like = item.is_like == 1 ? 0 : 1;
            item.like_num =
                item.is_like == 1 ? item.like_num + 1 : item.like_num - 1;
            likeTechnician({ technician_id: item.id }).then((res) => {});
        },
        onChoose(item) {
            this.active = item.id;
            this.searchList.forEach((subItem) => {
                if (subItem.id == item.id) {
                    if (subItem.up) {
                        subItem.up = false;
                        subItem.down = true;
                    } else {
                        subItem.down = false;
                        subItem.up = true;
                    }
                } else {
                    subItem.up = false;
                    subItem.down = false;
                }
            });
            if (item.id == 0) {
                this.order = 0;
            } else if (item.id == 1) {
                if (item.up) {
                    this.order = 1;
                } else {
                    this.order = 2;
                }
            } else if (item.id == 2) {
                if (item.up) {
                    this.order = 3;
                } else {
                    this.order = 4;
                }
            }

            this.onRefresh();
        },
        onScreenGenderChange(e) {
            let index = e.detail.value || 0;

            this.screenGender = this.screenGenderList[index].name;
            this.screenGenderID = this.screenGenderList[index].id;

            this.onRefresh();
        },
        onShowDetails(item) {
            uni.navigateTo({
                url: `/subPages/technician/home/technicianDetail?technicianID=${item.id}&serviceID=${this.serviceID}&lat=${this.locationInfo.lat}&lng=${this.locationInfo.lng}`,
            });
        },
        /**
         * 返回上一页
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 重新定位
         */
        onReLocation() {
            this.locationStatus = "loading";
            this.getLocation();
        },
        /**
         * 获取当前城市
         */
        getLocation() {
            location.getLocation((res) => {
                this.locationStatus = res.status;
                this.locationInfo = res;

                this.calculatScreenCity();
            });
        },
        /**
         * 筛选城市
         */
        onScreenCityChange(e) {
            let index = e.detail.value;

            this.screenCity = this.screenCityList[index].name;
            this.screenCityID = this.screenCityList[index].id;

            this.onRefresh();
        },
        /**
         * 计算筛选的城市
         */
        calculatScreenCity() {
            if (this.screenCityList.length > 0 && this.locationInfo !== null) {
                let index = this.screenCityList.findIndex(
                    (item) => item.name === this.locationInfo.city
                );
                if (index == -1) {
                    index = 0;
                }
                this.screenCity = this.screenCityList[index].name;
                this.screenCityID = this.screenCityList[index].id;

                this.onRefresh();
            }
        },
        /**
         * 生活照
         */
        onPreviewImage(images) {
            uni.previewImage({
                current: 0,
                urls: images,
            });
        },
        /**
         * 技师评价
         */
        onShowEvaluate(item) {
            this.evaluateTechnicianID = item.id;
            this.isShowEvaluate = true;
        },
        /**
         * 预约
         */
        onAppointment(item) {
            if (item.is_service != 1) {
                return;
            }
            uni.navigateTo({
                url: `/subPages/technician/home/confirmOrder?serviceID=${this.serviceID}&technicianID=${item.id}`,
            });
        },
        /**
         * 刷新
         */
        onRefresh() {
            this.page = 1;
            this.list = [];
            this.getData();
        },
        /**
         * 网络请求
         */
        getData() {
            technicianList({
                page: this.page,
                service_id: this.serviceID,
                area_id: this.screenCityID,
                keyword: this.keywords,
                lat: this.locationInfo.lat,
                lng: this.locationInfo.lng,
                gender: this.screenGenderID,
                order: this.order,
            }).then((res) => {
                this.total = res.data.total;
                const list = res.data.data;
                if (this.page === 1) {
                    this.list = list;
                } else {
                    this.list = this.list.concat(list);
                }
            });
        },
        /**
         * 获取城市信息
         */
        getCityData() {
            getCity().then((res) => {
                this.screenCityList = res.data;

                this.calculatScreenCity();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-head {
    position: sticky;
    left: 0;
    width: 100%;
    background-color: $bg-color;
    z-index: 90;

    .head-address {
        width: 100%;
        height: 88rpx;
        background-color: white;
        padding: 0 20rpx;
        box-sizing: border-box;

        .left-address {
            flex: 1;
            margin-right: 20rpx;
            overflow: hidden;

            > image {
                width: 24rpx;
                height: 28rpx;
            }
            > view {
                margin-left: 12rpx;
                flex: 1;
                overflow: hidden;
                color: $title-color;
            }
        }

        .right-again {
            > image {
                width: 24rpx;
                height: 24rpx;
            }
            > view {
                margin-left: 6rpx;
                color: $theme-color;
            }
        }
    }

    .head-search {
        margin-top: 20rpx;
        width: 100%;
        height: 116rpx;
        background-color: white;
        padding: 0 30rpx;
        box-sizing: border-box;

        .city-bg {
            max-width: 164rpx;
            margin-right: 10rpx;
            overflow: hidden;

            > view {
                --limit-num: 1;
                color: $title-color;
                overflow: hidden;
            }

            > image {
                margin-left: 12rpx;
                width: 20rpx;
                height: 12rpx;
            }
        }

        .search-bg {
            width: 416rpx;
            height: 60rpx;
            border-radius: 30rpx;
            overflow: hidden;
            background-color: #f5f6f8;

            > image {
                margin-left: 40rpx;
                width: 24rpx;
                height: 24rpx;
            }
            input {
                margin-left: 16rpx;
                flex: 1;
                margin-right: 20rpx;
                color: $title-color;
            }
            .place {
                color: #999999;
                line-height: 1;
            }
        }
    }
}
.wrap {
    --bottom-height: 140rpx;

    .wrap-list {
        width: 100%;
        overflow: hidden;
        padding: 0 20rpx;
        box-sizing: border-box;
        overflow: hidden;

        .item {
            margin-top: 20rpx;
            width: 100%;
            overflow: hidden;
            background-color: white;
            border-radius: 20rpx;
            padding: 30rpx 30rpx 30rpx 20rpx;
            box-sizing: border-box;

            .left {
                overflow: hidden;

                .service-status {
                    margin-top: 8rpx;
                    height: 36rpx;
                    line-height: 36rpx;
                    text-align: center;
                    border-radius: 18rpx;
                    overflow: hidden;
                    padding: 0 18rpx;
                    background: $time-grad-color;
                    color: $time-title-color;
                }
            }

            .center {
                margin-left: 22rpx;
                margin-right: 20rpx;
                flex: 1;
                overflow: hidden;

                .c-a {
                    width: 100%;
                    overflow: hidden;

                    .nickname {
                        --limit-num: 1;
                        color: $title-color;
                    }

                    .life {
                        height: 32rpx;
                        line-height: 32rpx;
                        text-align: center;
                        border: 2rpx solid $theme-color;
                        border-radius: 8rpx;
                        overflow: hidden;
                        padding: 0 16rpx;
                        color: $theme-color;
                    }
                }

                .c-b {
                    margin-top: 18rpx;
                    width: 100%;
                    overflow: hidden;

                    .star {
                        width: 25rpx;
                        height: 25rpx;
                    }
                    .score {
                        margin-left: 5rpx;
                        height: 25rpx;
                        line-height: 25rpx;
                        text-align: center;
                        color: #f98e35;
                    }
                    .num {
                        margin-left: 12rpx;
                        height: 25rpx;
                        line-height: 25rpx;
                        text-align: center;
                        color: #666666;
                    }
                }

                .c-c {
                    margin-top: 15rpx;
                    width: 100%;
                    overflow: hidden;

                    > image {
                        width: 24rpx;
                        height: 28rpx;
                    }
                    > view {
                        margin-left: 16rpx;
                        color: #666666;
                    }
                }

                .c-d {
                    margin-top: 15rpx;
                    width: 100%;
                    overflow: hidden;
                    color: #999999;

                    .details-img {
                        width: 30rpx;
                        height: 30rpx;
                    }
                    .details-text {
                        margin-left: 10rpx;
                    }

                    .evaluate-bg {
                        margin-left: 20rpx;

                        .evaluate-img {
                            width: 31rpx;
                            height: 30rpx;
                        }
                        .evaluate-text {
                            margin-left: 10rpx;
                        }
                    }

                    .like-bg {
                        margin-left: 20rpx;

                        .like-img {
                            width: 31rpx;
                            height: 31rpx;
                        }
                        .like-text {
                            margin-left: 10rpx;
                        }
                    }
                }
            }

            .right {
                overflow: hidden;

                .time-bg {
                    width: 130rpx;
                    height: 80rpx;
                    border-radius: 20rpx;
                    overflow: hidden;
                    border: 2rpx solid $theme-color;

                    .aa {
                        width: 130rpx;
                        height: 44rpx;
                        line-height: 44rpx;
                        text-align: center;
                        background: $grad-theme-color;
                        color: $bg-text-color;
                        overflow: hidden;
                    }

                    .bb {
                        width: 130rpx;
                        height: 36rpx;
                        line-height: 36rpx;
                        text-align: center;
                        color: $theme-color;
                        overflow: hidden;
                    }
                }

                .yy-btn {
                    margin-top: 34rpx;
                    width: 130rpx;
                    height: 50rpx;
                    line-height: 50rpx;
                    text-align: center;
                    overflow: hidden;
                    border-radius: 25rpx;
                    background: $grad-theme-color;
                    color: $bg-text-color;
                }
            }
        }
    }
}
.imagess {
    width: 126rpx;
    height: 126rpx;
    border-radius: 50%;
    position: relative;
    .border {
        width: 100%;
        height: 100%;
    }
    .avatarI {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .avatar {
        width: 126rpx;
        height: 126rpx;
        border-radius: 50%;
        overflow: hidden;
    }
}

.mt-20 {
    margin-top: 14rpx;
}

.tags {
    width: 160rpx;
    height: 40rpx;
    > image {
        width: 100%;
        height: 100%;
    }
}

.search {
    .card {
        width: 100%;
        border-radius: 20rpx;
        overflow: hidden;
        background: white;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        .item {
            .icon {
                width: 16rpx;
                height: 8rpx;
                margin: 2rpx 8rpx;
            }
        }
    }
}
.active {
    color: $theme-color !important;
}
.downActive {
    transform: rotate(180deg);
}
</style>
